<template>
  <div class="view-container">
    <div class="app-title-container title-position">
      <modules-title
        title-name="立项审批详情"
        style="margin-bottom: 20px;"
      >
        <template
          v-if="detailData"
          slot="btn"
        >
          <el-button
            plain
            @click="goBack"
          >返回</el-button>
          <el-button
            v-hasPermi="{v:['project:my:submitProjectApproval'], isF: detailData.info_status==6}"
            type="primary"
            @click="submitProjectApproval"
          >
            发起立项审批
          </el-button>
          <!-- <el-button
            v-hasPermi="{v:['project:my:projectApproval'], isF: detailData.info_status==7}"
            type="primary"
            @click="projectApprovalOperation"
          >
            立项审批
          </el-button> -->
          <!-- 打印：手动权限或创建人 -->
          <el-button
            v-hasPermi="{v:['project:shenpi:printApproval'], isF: detailData.info_status==9 && !detailData.isCreator}"
            type="primary"
            @click="printApproval"
          >
            打印立项审批表</el-button>
          <el-button
            v-if="detailData.info_status==9 && detailData.isCreator"
            type="primary"
            @click="printApproval"
          >
            打印立项审批表</el-button>
          <el-button
            v-if="detailData.info_status == 11 && detailData.info_check&&detailData.info_check.check_creator_id===userInfo.user.id"
            type="primary"
            @click="submitProjectApproval"
          >
            编辑
          </el-button>
          <el-button
            v-if="detailData.info_check&&detailData.info_check.Cancelable==true&&detailData.info_check.check_creator_id===userInfo.user.id"
            type="primary"
            @click="cancelOperation(detailData.info_check.id)"
          >
            撤销
          </el-button>
        </template>
      </modules-title>
    </div>
    <div
      v-if="detailData"
      class="main-content-container"
    >
      <div class="baseInfo-container">
        <baseInfo :detail-data="detailData" />
      </div>

      <div
        v-if="detailData"
        class="tab-container"
        style="margin-top:20px;"
      >
        <div class="tab-content">
          <optionLog :project-id="projectId" />
        </div>
      </div>
    </div>
    <!-- 决议审批 -->
    <audit-dialog
      ref="auditDialog"
      :project-id="projectId"
      @evaluationSuccess="evaluationSuccess"
    />
    <!-- 立项审批 -->
    <project-approval-dialog
      ref="projectApprovalDialog"
      :project-id="projectId"
      @projectApprovalSuccess="projectApprovalSuccess"
    />

    <vue-easy-print
      ref="printApproval"
      table-show
    >
      <!-- 你自己编写打印的模板  -->
      <template slot-scope="func">
        <div id="print-template">
          <approval-print
            :detail-data="approvalPrintData"
            :get-chinese-number="func.getChineseNumber"
          />
        </div>
      </template>
    </vue-easy-print>
  </div>
</template>

<script>
import { auditDetail, approvalOpinion } from '@/api/projectInformation'

export default {
  name: 'ProjectDetail',
  components: {
    BaseInfo: () => import('./modules/baseInfo'),
    OptionLog: () => import('./modules/optionLog'),
    AuditDialog: () => import('../modules/auditDialog.vue'),
    ProjectApprovalDialog: () => import('../modules/projectApprovalDialog.vue'),
    ApprovalPrint: () => import('../modules/approvalPrint.vue')
  },
  data() {
    return {
      tabs: '',
      isAllSubmit: false,
      activeName1: '1',
      activeName2: '1',
      projectId: '',
      demandInfoId: '',
      flowId: '',
      detailData: null,
      departmentLookInfo: null,
      departmentList: [], // 参与调查报告的部门，以及是否提交报告
      statusData: {
        info_status: 0
      },
      userInfo: null,
      isJoin: false, // 当前部门是否参与调研
      // 自己所在部门信息
      departmentData: {
        department_id: '',
        department_name: ''
      },
      settingList: [],
      approvalPrintData: null
    }
  },
  // 生命周期 - 创建完成（访问当前this实例）
  created() {
    // 是否为提交调研报告
    this.tabs = this.$route.query.tabs
    if (this.tabs && this.tabs === 'subReport') {
      this.activeName1 = '2'
    }
    this.userInfo = this.$store.getters.userInfo
    if (this.userInfo && this.userInfo.user.department) {
      this.departmentData.department_id = this.userInfo.user.department.id
      this.departmentData.department_name =
        this.userInfo.user.department.department_name
    }
    this.projectId = this.$route.query.projectId || ''
    this.getProjectAuditDetail(this.projectId)
  },
  methods: {
    // 修改立项审批
    submitProjectApproval() {
      this.$router.push({
        name: 'submitApproval',
        query: {
          auditProjectId: this.projectId,
          types: 1
        }
      })
    },
    // 返回之后刷新列表
    refreshBack() {
      this.$route.params.refresh = true
      this.$router.back()
    },
    lookInfoSuccess() {
      this.getProjectAuditDetail(this.projectId)
    },
    editProjectInfo() {
      this.$router.push({
        name: 'createEdit',
        query: {
          projectId: this.projectId
        }
      })
    },
    goBack() {
      // this.$router.back()
      this.refreshBack()
    },
    printApproval() {
      this.$refs.printApproval.print()
    },
    // 获取立项详情
    getProjectAuditDetail(id) {
      const that = this
      const datas = { id: id }
      auditDetail(datas).then((res) => {
        if (res.code === 200) {
          that.detailData = res.data
          that.departmentList = res.data.department_research
          // 需求状态
          that.statusData.info_status = that.detailData.info_status
          // 判断是否为创建人
          if (that.detailData.creator_id === that.userInfo.user?.id) {
            Object.assign(that.detailData, { isCreator: true })
          } else {
            Object.assign(that.detailData, { isCreator: false })
          }
          // 如果是尽调中，判断该部门是否已提交尽调报告
          if (that.statusData.info_status >= 1) {
            const p = that.departmentList.filter(
              (pl) => pl.department_id === that.departmentData.department_id
            )[0]
            that.departmentLookInfo = p || null
          }
          // 判断当前部门是否参与调研
          const p = that.departmentList.filter(
            (pl) => pl.department_id === that.departmentData.department_id
          )
          // 判断是否所有部门都提交了调研报告
          this.isAllSubmit = that.departmentList.every(
            (pl) => pl.if_commit === 1
          )
          if (p.length) {
            that.isJoin = true
          }
          // 获取审批数据
          approvalOpinion({ id: that.detailData.info_check.id }).then(
            (remark) => {
              if (remark.code === 200) {
                Object.assign(that.detailData, remark.data)
              } else {
                Object.assign(that.detailData, {
                  template_name: '',
                  charge_people: null,
                  manager_people: null,
                  suggest_people: null
                })
              }
              that.approvalPrintData = { ...that.detailData }
            }
          )
        }
      })
    },

    /** 审批按钮操作 */
    handleAudit() {
      this.$refs.auditDialog.open()
    },
    evaluationSuccess() {
      this.getProjectAuditDetail(this.projectId)
    },
    // 立项审批操作
    projectApprovalOperation() {
      this.$refs.projectApprovalDialog.open()
    },
    projectApprovalSuccess() {
      this.getProjectAuditDetail(this.projectId)
    },
    // 撤销
    cancelOperation(id) {
      this.$alert('是否确认撤销？', '撤销', {
        type: 'warning',
        confirmButtonText: '确定',
        cancelButtonText: '取消'
      })
        .then(() => {
          const subdata = {
            flow_id: id,
            model_type: 'BuildProject'
          }
          this.$comFun
            .cancelFunc(subdata)
            .then(() => {
              this.$message({
                type: 'success',
                message: '已撤销'
              })
              this.getProjectAuditDetail(this.projectId)
            })
            .catch((err) => {
              this.$message.error(err)
            })
        })
        .catch((err) => {
          console.log(err)
        })
    }
  }
}
</script>
<style lang="scss" scoped>
/* @import url(); 引入css类 */
@import "@/styles/variables.scss";
.view-container {
  padding-top: 110px;
  .tip-container {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    p {
      margin: 0px;
      padding: 20px 0px;
    }
    .tip-title {
      font-size: $font-size-main;
      color: $font-color-main;
      width: 120px;
      text-align: right;
      padding-right: 12px;
      box-sizing: border-box;
    }
    .department-container {
      .icon {
        margin-left: 4px;
      }
      .el-tag {
        margin-right: 10px;
        &:hover {
          cursor: pointer;
        }
      }
    }
  }
  .status-container {
    margin-bottom: 40px;
  }
}

.tab-content {
  min-height: 200px;
}
</style>
